﻿

apolloColumnSelector = function (container, opts) {
    this.opts = opts || {};
    
    this.domContainer = container;
    this.domAvailableContainer = null;
    this.domSelectedContainer = null;
    this.domLoadingContainer = null;
    this.loadedColumns = [];
    this.selectedColumns = opts.columns;
    this.baseEntityID = opts.entityID;

    this.aggregatedValues = ["Sum", "Count", "CountDistinct", "Min", "Max", "Avg", "Year", "Quarter", "Month", "Date"];
    this.aggregatedNone = "None";

    this.draw();
}

apolloColumnSelector.prototype.draw = function () {
    // clear dom container
    while (this.domContainer.hasChildNodes()) {
        this.domContainer.removeChild(this.domContainer.lastChild);
    }

    var that = this;

    // init the dropdowns
    this.domAvailableContainer = document.createElement("select");
    this.domAvailableContainer.setAttribute("size", 10);
    this.domAvailableContainer.setAttribute("class", "colsel_available");
    this.domAvailableContainer.style.width = "300px";
    this.domAvailableContainer.onchange = function () {
        var selectedPath = that.domAvailableContainer.options[that.domAvailableContainer.selectedIndex].value;

        for (var index = 0; index < that.loadedColumns.length; index++) {
            if (that.loadedColumns[index].name == selectedPath) {
                if (that.loadedColumns[index].fieldType == "object") {
                    // check if there are loaded properties for it
                    var isLoaded = false;

                    for (var auxindex = index; auxindex < that.loadedColumns.length; auxindex++) {
                        if (that.loadedColumns[auxindex].name.indexOf(selectedPath + ".") == 0) {
                            isLoaded = true;
                            break;
                        }
                    }

                    if (!isLoaded)
                        that.populateAvailableDropDown(selectedPath);
                }

                break;
            }
        }
    }


    this.domSelectedContainer = document.createElement("select");
    this.domSelectedContainer.setAttribute("size", 10);
    this.domSelectedContainer.setAttribute("class", "colsel_selected");
    this.domSelectedContainer.style.width = "300px";

    this.domLoadingContainer = document.createElement("div");
    this.domLoadingContainer.setAttribute("class", "colsel_loading");
    this.domLoadingContainer.setAttribute("style", "display: none");


    // init table
    var table = document.createElement("table");
    table.setAttribute("class", "column-selector");
    this.domContainer.appendChild(table);

    var tbody = document.createElement("tbody");
    table.appendChild(tbody);

    var tr = document.createElement("tr");
    tbody.appendChild(tr);

    // available
    var td1 = document.createElement("td");
    td1.setAttribute("class", "colsel_available");
    td1.setAttribute("width", "300px");
    td1.appendChild(this.domAvailableContainer);
    td1.appendChild(this.domLoadingContainer);
    tr.appendChild(td1);


    var td2 = document.createElement("td");
    td2.setAttribute("class", "colsel_btns");


    // button Add
    var btnAdd = document.createElement("button");
    var btnAddIcon = document.createElement("span");
    btnAdd.appendChild(btnAddIcon);
    btnAdd.onclick = function () {
        if (that.domAvailableContainer.selectedIndex < 0)
            return;

        var o1 = document.createElement("option");
        o1.setAttribute("value", that.domAvailableContainer.options[that.domAvailableContainer.selectedIndex].value);
        o1.appendChild(document.createTextNode(that.domAvailableContainer.options[that.domAvailableContainer.selectedIndex].text));
        that.domSelectedContainer.appendChild(o1);

        that.domAvailableContainer.options[that.domAvailableContainer.selectedIndex].selected = false;

        if (that.domSelectedContainer.selectedIndex >= 0)
            that.domSelectedContainer.options[that.domSelectedContainer.selectedIndex].selected = false;

        that.domSelectedContainer.options[that.domSelectedContainer.options.length - 1].selected = true;
    }
    td2.appendChild(btnAdd);

    // button Del
    var btnDel = document.createElement("button");
    var btnDelIcon = document.createElement("span");
    btnDel.appendChild(btnDelIcon);
    btnDel.onclick = function () {
        if (that.domSelectedContainer.selectedIndex < 0)
            return;

        that.domSelectedContainer.removeChild(that.domSelectedContainer.options[that.domSelectedContainer.selectedIndex]);
    }
    td2.appendChild(btnDel);

    tr.appendChild(td2);


    // selected
    var td3 = document.createElement("td");
    td3.setAttribute("class", "colsel_selected");
    td3.setAttribute("width", "300px");
    td3.appendChild(this.domSelectedContainer);
    tr.appendChild(td3);


    // button Up
    var td4 = document.createElement("td");
    td4.setAttribute("class", "colsel_btns");
    var btnUp = document.createElement("button");
    var btnUpIcon = document.createElement("span");
    btnUp.appendChild(btnUpIcon);
    btnUp.onclick = function () {
        if (that.domSelectedContainer.selectedIndex <= 0)
            return;

        var moveFrom = that.domSelectedContainer.selectedIndex;
        var moveTo = that.domSelectedContainer.selectedIndex - 1;

        var auxText = that.domSelectedContainer.options[moveFrom].text;
        var auxValue = that.domSelectedContainer.options[moveFrom].value;

        that.domSelectedContainer.options[moveFrom].text = that.domSelectedContainer.options[moveTo].text;
        that.domSelectedContainer.options[moveFrom].value = that.domSelectedContainer.options[moveTo].value;
        that.domSelectedContainer.options[moveFrom].selected = false;
        that.domSelectedContainer.options[moveTo].text = auxText;
        that.domSelectedContainer.options[moveTo].value = auxValue;
        that.domSelectedContainer.options[moveTo].selected = true;
    }
    td4.appendChild(btnUp);

    // button Down
    var btnDwn = document.createElement("button");
    var btnDwnIcon = document.createElement("span");
    btnDwn.appendChild(btnDwnIcon);
    btnDwn.onclick = function () {
        if (that.domSelectedContainer.selectedIndex < 0 && (that.domSelectedContainer.selectedIndex + 1) == that.domSelectedContainer.options.lenght)
            return;

        var moveFrom = that.domSelectedContainer.selectedIndex;
        var moveTo = that.domSelectedContainer.selectedIndex + 1;

        var auxText = that.domSelectedContainer.options[moveFrom].text;
        var auxValue = that.domSelectedContainer.options[moveFrom].value;

        that.domSelectedContainer.options[moveFrom].text = that.domSelectedContainer.options[moveTo].text;
        that.domSelectedContainer.options[moveFrom].value = that.domSelectedContainer.options[moveTo].value;
        that.domSelectedContainer.options[moveFrom].selected = false;
        that.domSelectedContainer.options[moveTo].text = auxText;
        that.domSelectedContainer.options[moveTo].value = auxValue;
        that.domSelectedContainer.options[moveTo].selected = true;
    }
    td4.appendChild(btnDwn);

    tr.appendChild(td4);

    $(btnAdd).addClass("colsel_btn_add ui-state-default ui-corner-all");
    $(btnAddIcon).addClass("ui-icon ui-icon-circle-triangle-e");
    $(btnDel).addClass("colsel_btn_del ui-state-default ui-corner-all");
    $(btnDelIcon).addClass("ui-icon ui-icon-circle-triangle-w");
    $(btnUp).addClass("colsel_btn_up ui-state-default ui-corner-all");
    $(btnUpIcon).addClass("ui-icon ui-icon-circle-triangle-n");
    $(btnDwn).addClass("colsel_btn_dwn ui-state-default ui-corner-all");
    $(btnDwnIcon).addClass("ui-icon ui-icon-circle-triangle-s");

    // dropdown for aggregates && populate it
    var domAggreateSelector = document.createElement("select");
    var domAggreateSelectorOption = document.createElement("option");
    domAggreateSelectorOption.setAttribute("value", this.aggregatedNone);
    domAggreateSelectorOption.appendChild(document.createTextNode(this.aggregatedNone))
    domAggreateSelector.appendChild(domAggreateSelectorOption);

    for (var index = 0; index < this.aggregatedValues.length; index++) {
        domAggreateSelectorOption = document.createElement("option");
        domAggreateSelectorOption.setAttribute("value", this.aggregatedValues[index]);
        domAggreateSelectorOption.appendChild(document.createTextNode(this.aggregatedValues[index]))
        domAggreateSelector.appendChild(domAggreateSelectorOption);
    }

    this.domSelectedContainer.onchange = function () {
        // update the aggregate selector
        var selectedValue = that.domSelectedContainer.options[that.domSelectedContainer.selectedIndex].value;

        if (selectedValue.indexOf("(") > 0) {
            // it's an aggregate, just hide the dropdown
            domAggreateSelector.style.display = "none";
        } else {
            domAggreateSelector.style.display = "block";
            $(domAggreateSelector).val(that.aggregatedNone);
        }
    }
    domAggreateSelector.onchange = function () {
        // update the actual item
        var selectedOption = that.domSelectedContainer.options[that.domSelectedContainer.selectedIndex];
        var selectedAggregate = domAggreateSelector.options[domAggreateSelector.selectedIndex].value;

        selectedOption.text = selectedAggregate + "(" + selectedOption.text + ")";
        selectedOption.value = selectedAggregate + "(" + selectedOption.value + ")";

        domAggreateSelector.style.display = "none";
        $(domAggreateSelector).val(-1)
    }

    td4.appendChild(domAggreateSelector);
    $(domAggreateSelector).addClass("colsel_aggregate");

    this.populateSelectedDropDown(this.baseEntityID, 0);
    this.populateAvailableDropDown(null);
}

apolloColumnSelector.prototype.populateSelectedDropDown = function (entityID, index) {

    for (var index = 0; index < this.selectedColumns.length; index++) {
        var opt = document.createElement("option");
        opt.appendChild(document.createTextNode(this.selectedColumns[index].displayName));

        // will take into account the aggregation
        if (this.selectedColumns[index].aggregate == this.aggregatedNone) {
            opt.setAttribute("value", this.selectedColumns[index].name);
        }
        else {
            opt.setAttribute("value", this.selectedColumns[index].aggregate + "(" + this.selectedColumns[index].name + ")");
        }

        this.domSelectedContainer.appendChild(opt);
    }
}

apolloColumnSelector.prototype.populateAvailableDropDown = function (path) {
    var url = "/TypeDefinitionHandler.ashx?entityID=" + this.baseEntityID;

    if (path)
        url += "&path=" + path;

    this.domLoadingContainer.setAttribute("style", "display: block");

    var that = this;

    jQuery.ajax({
        url: url,
        dataType: "text",
        success: function (jsonData) {
            //alert(jsonData);

            var jsonObject = jQuery.parseJSON(jsonData);

            if (jsonObject.type == "Not found") {
                that.domLoadingContainer.setAttribute("style", "display: none");
                alert("Type for \"" + path + "\" not found!");
                return;
            }

            var optInsertBefore = null;

            if ((that.domAvailableContainer.selectedIndex + 1) != that.domAvailableContainer.length)
                optInsertBefore = that.domAvailableContainer.options[that.domAvailableContainer.selectedIndex + 1];

            for (var index = 0; index < jsonObject.columns.length; index++) {
                var opt = document.createElement("option");
                opt.setAttribute("value", jsonObject.columns[index].name);
                opt.appendChild(document.createTextNode(jsonObject.columns[index].displayName));

                if (optInsertBefore)
                    that.domAvailableContainer.insertBefore(opt, optInsertBefore);
                else
                    that.domAvailableContainer.appendChild(opt);

                that.loadedColumns.push(jsonObject.columns[index]);
            }

            that.domLoadingContainer.setAttribute("style", "display: none");
        }
    });

}

apolloColumnSelector.prototype.getSelectedColumns = function () {
    var selectedColumns = "";

    for (var index = 0; index < this.domSelectedContainer.options.length; index++) {
        if (index > 0)
            selectedColumns += ",";

        selectedColumns += this.domSelectedContainer.options[index].value;
    }

    return selectedColumns;
}

